<template>
  <div class="ne">
    <!-- <img src="http://img3.yun300.cn/img/nyban4.jpg?tenantId=214398&viewType=1&k=1638866723000" style="width:100%;margin-top: 70px;" /> -->
    <div class="nex">
        <title-bar class="animate__animated wowNews animate__fadeInDown" eTitle='NEWS丨动态'></title-bar>
        <div class="barx">
            <div @click="refresh">全部</div><span>|</span>
            <div @click="refresh">分享设计</div><span>|</span>
            <div @click="refresh">团建拓展</div>
            <span class="xians"></span>
        </div>
        
        <div class="barcon">
            <div class="barcon_tar animate__animated wowNews animate__fadeInLeft" v-for="item in barList" :key="item.id" @mouseover="tarChange($event)" @mouseout="targe($event)">
                <div class="tar_left">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="tar_right">
                    <div class="tard">
                        <p class="pone">{{item.title}}</p>
                        <p style="height:30px;"></p>
                        <div class="description">
                            <div class="destxt">{{item.txt}}</div>
                            <div style="width:5%;"></div>
                            <!-- <div class="you"><span>MORE</span>&nbsp;&nbsp;&gt;</div> -->
                        </div>
                    </div>
                    <div class="rightspan">
                        <span class="spanone">{{item.day}}</span>
                        <span class="spantwo">{{item.time}}</span>
                        <!-- <div class="xian">/</div> -->
                    </div>
                </div>
            </div>
        </div>
        <Btm></Btm>
    </div>
  </div>
</template>

<script> 
export default {
    data(){
        return{
            barList:[
                {
                    id:1,
                    imgUrl:'https://s1.ax1x.com/2022/08/08/vMoi4O.jpg',
                    title:'土楼探险之旅 2.0',
                    txt:'年末的最后一个晚上 繁华的大街上 华丽的灯饰依然五彩缤纷 人潮人海的道路上 却是一片冷冷清清 路边，站着一位中年男人 顶着凌厉的寒风 卖力地吹着萨克斯 那悠扬的旋律被冰冻包裹着 徘徊在空荡的楼宇之间 彰显着寂寥 路边，中年男人开始摇摆着身躯 演绎着萨',
                    day:'7-28',
                    time:'2022'
                },
               {
                    id:2,
                    imgUrl:'https://s1.ax1x.com/2022/08/08/vMoVvd.jpg',
                    title:'我们之间|平安夜',
                    txt:`我生命中的夜晚没有一个是不光明的，我喜欢夜晚，就是因为我的夜晚比所有人的夜晚更加光明。

人各有所好，有人喜欢名车，有人喜欢名表，而我则痴迷于各种灯具。当初筹划建造别墅的时候，我就委托国外著名的灯光设计大师赫美普欣腾为我的豪宅设计灯饰亮化，他把室外墙体的灯光设计得像瀑布一样，鱼塘的灯光设计得则像夜空中的万点星辰。最为讲究的是我的卧室，依据电脑程序每天一种色调，一周一循环，节假日还有特殊设计。我喜欢把各种女人带到这间卧室，白皮肤的，黑皮肤的，棕色皮肤的……每夜激情过后，我会按下一个按钮，届时室内亮度会达到极值，照比白日绝不逊色。接下来我将进行每日必作的工作----数钱。我把装钱的木箱搬出来，里面一万元一沓的钞票已经积攒了将近一千沓了，这些钱多是经营煤矿的矿主送给我的，当然送的时候有些钞票不是那么全新的，我托银行的朋友把它们都换成了不错号的全新的钞票，新钞票不但看起来美观，点起来手感也好，而且节省空间。`,
                    day:'7-29',
                    time:'2022'
                },
                {
                    id:3,
                    imgUrl:'https://s1.ax1x.com/2022/08/08/vMoeKA.jpg',
                    title:'我们之行 | 土楼行',
                    txt:'这片美妙的沙滩就伏在闽江口**海峡边上，长年的海浪将黄灿灿的的沙粒冲刷成平整细腻的肌肤，风的飘逸、月的变幻、山的幽秘、水的拂弄，在这里演练着各种变幻!当我踏上沙滩那一刻起，广阔就是我的胸怀。少了些许杂念，把身边的一切琐事都放下了，犹如这一片空旷的白皙，难以言表的美。经过千百年的筛炼，沙滩格外的松软湿润，海浪静悄悄的涌过来，又悄悄退去。沙滩上依稀撒着数点模糊的人影，有的相互追逐，有的窃窃私语，有的躺在沙滩上，都在享受这美好的时光。',
                    day:'7-30',
                    time:'2022'
                },
                {
                    id:4,
                    imgUrl:'https://s1.ax1x.com/2022/08/08/vMomDI.jpg',
                    title:'六鳌之旅',
                    txt:'金沙滩之夏，在蓝天下，在阳光里，构成岛城夏季光亮迷人的一道绝景的五彩太阳伞、蒙古包、帐篷及救生泳具沿海岸星罗棋布。游人或租一顶太阳伞遮阳、小憩，谈笑风生;或举家躺卧沙滩上，享受这别具情趣的日光浴;或到近海中游泳，或乘摩托艇穿行在海面上。一把五彩的太阳伞就好像一把浪漫、一手情趣和一种氛围，不知不觉地深植于旅人的心田。也许不曾想过浪漫是什么，浪漫就那么不经意地来到了我们身边。脚踏细沙，眼看大海!晨风照面，舒爽怡人;海味入鼻，直动心灵。白浪横接天地，卷卷而来，翻腾叠起，煞是有威。错落小岛，迫人遐想无穷;游艇飞梭，引动游人心绪。',
                    day:'8-01',
                    time:'2022'
                },
                {
                    id:5,
                    imgUrl:'https://s1.ax1x.com/2022/08/08/vMoQ58.jpg',
                    title:'2018米兰国际家具上海展热点必看：近百年历史的意大利顶级品牌 ...',
                    txt:'高空中的艳阳热情地洒下金色的光芒，向战士们友好地示敬;大海的波涛也愈加雀跃，俏皮地一个劲往岸上扑，想亲吻一下这些保家卫国的铁汉子们;郁郁青青的片片沿海防护林，清雅别致的浴场别墅，金色细软的沙子以难言的愉悦之情容纳了我们可亲可爱的战士。徜徉在金沙滩，碧波涌涌人头涌涌，眼前的景色无疑会把你融化在海的怀中，让你陶醉在物我两忘的境界里。即使弄一身沙子，一个浪头卷过来，沙子瞬间就被冲洗地无影无踪，清清爽爽。',
                    day:'8-01',
                    time:'2022'
                },
            ],
        }
    },
    created(){
         this.$nextTick(() => {
        new this.$wow({ boxClass: "wowNews" }).init();
      });
    },
    mounted(){
        window.scrollTo(0,0)
    },
    methods:{
        tarChange(e){
            this.$(e.currentTarget).find('.tard').stop().animate({'margin-left':'15px'},500)
            this.$(e.currentTarget).find('.you').stop().animate({'margin-right':'0'},500)
            this.$(e.currentTarget).find('.you span').css({'color':'black'})
        },
        targe(e){
            this.$(e.currentTarget).find('.tard').stop().animate({'margin-left':'0'},500)
            this.$(e.currentTarget).find('.you').stop().animate({'margin-right':'15px'},500)
            this.$(e.currentTarget).find('.you span').css({'color':'#bcbcbc'})
        },
        refresh(){
            this.$router.go(0)
        }
    }
}
</script>

<style lang="scss" scoped>
.ne{
    margin-top: 150px;
}
.nex{
    position: relative;
}
.xians {
        position: absolute;
        top: 85%;
        left: 0%;
        height: 2px;
        width: 100%;
        background-image: radial-gradient(
          555px 555px at 555px 0,
          #c6c6c6,
          #f3f3f3
        );
      }
    .barx{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70px;
        position: relative;
        div{
            height: 20px;
            margin: 0 15px;
            cursor: pointer;
            position: relative;
            color: #999;
        }
        span{
            cursor: pointer;
        }
        div:first-child{
            color: black;
        }
        div:hover{
            color: rgb(0, 0, 0);
        }
        div::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 1.5px;
            background: black;
            transition: all 0.3s ease-out;
        }
        div:hover::after{
            width: 100%;
            transition: all 0.5s ease-in;
        }
    }
    .barcon{
        cursor: pointer;
        padding: 20px 40px;
        .barcon_tar{
            padding: 30px 0 30px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            display: flex;
            .tar_left{
                width: 50%;
                // height: 250px;
                box-shadow: 0 0 5px 5px #d9d9d9;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .tar_right{
                width: 50%;
                padding: 0 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .tard{
                    margin-top: 10px;
                    width:100%;
                    .pone{
                        color: #555;
                        font-size: 18px;
                        font-weight: bolder;
                    }
                    .description{
                        line-height: 22px;
                        font-size: 13px;
                        color: #6a6a6a;
                    }
                }
                .rightspan{
                    position: relative;
                    .xian{
                        position: absolute;
                        left: -22px;
                        color: #b1b1b1;
                    }
                    .spanone{
                        font-size: 18px;
                        font-weight: bold;
                        color: black;
                    }
                    .spantwo{
                        font-family: HELVETICANEUELTPRO-THEX;
                        font-weight: inherit;
                        color: #c8c8c8;
                        font-size: 12px;
                        margin-left: 25px
                    }
                }
            }
        }
    }
    .description{
        display: flex;
        justify-content: space-between;
        width: 100%;
        .destxt{
            width: 100%;
        }
        .you{
            width: 90px;
            text-align: center;
            color: #bcbcbc;
            border-left:1.3px solid rgba(0, 0, 0, 0.08);
            margin-right: 15px;
            margin-left: 50px;
            width: 10%;
        }
    }
    
</style>